<template>
	<view>
		<u-dropdown height="80" style="">
			<u-dropdown-item v-model="value1" :title="lable1" :options="options1" @change="change"></u-dropdown-item>
			<u-dropdown-item v-model="value2" :title="lable2" :options="options2" @change="change"></u-dropdown-item>
			<u-dropdown-item v-model="value3" :title="lable3" :options="options3" @change="change"></u-dropdown-item>
		</u-dropdown>
		<view class="margin-lr-sm">
			<view class="flex justify-between margin-bottom bg padding-sm" @click="goOrder(goods.id)"
				v-for="(goods,i) in goodses" :key="i">
				<u-image :src="goods.user.avr" width="200upx" height="200upx" mode="">
				</u-image>
				<view class="flex-sub margin-left text-white flex flex-direction justify-between">
					<view class="flex justify-between">
						<view>
							<view class="margin-right-xs" style="display: inline-block;">
								{{ goods.user.nick }}
							</view>
							<view class="round"
								style="display: inline-block;background-color: #582D4D; color: #FF659A;padding: 2upx 8upx;">

								<u-icon v-if="goods.user.gender =='男'" name="man" color="#55aaff" size="24">
								</u-icon>
								<u-icon v-if="goods.user.gender =='女'" name="woman" color="#FF659A" size="24">
								</u-icon>
							</view>
						</view>
						<!-- <view class="radius"
							style="color: white;background: #243E6A;padding: 0 8upx;display: inline-block;">
							<view
								style="width: 10upx;height: 10upx;background: #1AD566;border-radius: 10upx;display: inline-block;margin: 0 8upx 4upx 0;">
							</view>
							西安
						</view> -->
					</view>
					<view class="flex radius"
						style="background: url(../../../static/images/index/bg.png)100% no-repeat;line-height: 34upx;">
						<u-image :src="goodsCategory.img" width="34upx" height="32upx"></u-image>
						<text class="margin-left-xs margin-right-sm">{{ goodsCategory.name }}</text>
					</view>
					<view class="flex" style="color: #3390FF;">
						<view class="margin-right">评分{{ goods.goodsScore }}</view>
						<view>服务{{ goods.saleNum }}单</view>
					</view>
					<view><text style="color: #FF6F1B;">{{ goods.money }}币 </text> /局</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:1,
				goodses: [],
				goodsCategory: {},
				goodsSortVo:{
					id:1,
					value1:this.value1,
					value2:this.value2,
					value3:this.value3
				},
				value1: 1,
				value2: 1,
				value3: 1,
				options1: [{
						label: '智能排序',
						value: 1,
					},
					
					{
						label: '人气优先',
						value: 2,
					},
					{
						label: '评分优先',
						value: 3,
					}
				],
				options2: [{
						label: '不限性别',
						value: 1,
					},
					{
						label: '限男生',
						value: 2,
					},
					{
						label: '限女生',
						value: 3,
					}
				],
				options3: [{
						label: '价格',
						value: 1,
					},
					{
						label: '从高到低',
						value: 2,
					},
					{
						label: '从低到高',
						value: 3,
					}
				],
				lable1: '智能排序',
				lable2: '不限性别',
				lable3: '价格',
			}
		},
		onLoad(option) {
			this.id=option.id;
			console.log(this.id)
			uni.setNavigationBarTitle({
				title: option.name
			})
			this.getData();
		},
		methods: {
			getData(){
				this.$myRequest({
					url: "/goods/getByCategoryId",
					method: "get",
					data: {
						id: this.id
					}
				}).then(r => {
					this.goodses = r.data.data.goods;
					this.goodsCategory=r.data.data.goodsCategory;
					//console.log(this.goodses);
				})
			},
			// 跳转用户详情页
			goOrder(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pages/index/game/order?id='+id
				});
			},
			change(){
				console.log(this.value1);
				console.log(this.value2);
				console.log(this.value3);
				this.lable1=(this.options1[this.value1-1].label);
				this.lable2=(this.options2[this.value2-1].label);
				this.lable3=(this.options3[this.value3-1].label);
				this.goodsSortVo.id=this.id;
				this.goodsSortVo.value1=this.value1;
				this.goodsSortVo.value2=this.value2;
				this.goodsSortVo.value3=this.value3;
				//console.log(this.goodsSortVo);
				if(this.value1==1 && this.value2==1 && this.value3==1){
					this.getData();
				}else{
					this.$myRequest({
						url: "/goods/getByCategoryId/sort",
						method: "post",
						data: this.goodsSortVo
					}).then(r => {
						this.goodses = r.data.data.goods;
						this.goodsCategory=r.data.data.goodsCategory;
						console.log(this.goodses);
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #111224;
	}

	.bg {
		background-color: #1E1F31;
	}
</style>
